<template>
  <draw-component
    :drawer-visible="state.show"
    size="650px"
    title="用户详情"
    :show-bottom-btn="false"
    @close-drawer="handleClose"
  >
    <div class="my-detail-box df aic">
      <div v-for="(item, index) in state.detailItemList" :key="index" class="detail-item">
        <span class="label">{{ item.name }}:</span>
        <span class="text">{{ state.formData[item.key] }}</span>
      </div>
    </div>
    <div class="my-tab-box df aic">
      <div class="tab-item" :class="state.tabId === '1' ? 'active' : ''" @click="state.tabId = '1'">角色</div>
      <div class="tab-item" :class="state.tabId === '2' ? 'active' : ''" @click="state.tabId = '2'">区域</div>
    </div>
    <table-page-content
      v-show="state.tabId === '1'"
      :table-data="tableObj.tableList"
      :table-headers="detailHeaders1"
      :table-height="'45vh'"
      :is-pager="false"
      :is-slot-num="false"
    >
    </table-page-content>
    <table-page-content
      v-show="state.tabId === '2'"
      :table-data="tableObj.tableList2"
      :table-headers="detailHeaders2"
      :table-height="'45vh'"
      :is-pager="false"
      :is-slot-num="false"
    >
    </table-page-content>
    <template #footBtn>
      <el-button class="btn cancel" @click="handleClose">关闭</el-button>
    </template>
  </draw-component>
</template>

<script setup lang="ts">
import { getDetailById } from '../api'
import { detailHeaders1, detailHeaders2 } from '../config'
import { spliceCodeName } from '@/utils/index'
import { useProxy } from '@/utils/proxy'
const { proxy } = useProxy()
const state = reactive({
  tabId: '1',
  userId: '',
  show: false,
  detailItemList: [
    { key: 'employeeId', name: '用户工号' },
    { key: 'areaCode', name: '区域编码' },
    { key: 'userTypeDescr', name: '用户类型' },
    { key: 'userName', name: '用户名称' },
    { key: 'phone', name: '手机号' },
    { key: 'statusDescr', name: '用户状态' },
    { key: 'professionalTitlesDescr', name: '职称' },
    { key: 'departmentDescr', name: '部门' },
    { key: 'validityTypeDescr', name: '有效期类型' }
  ],
  formData: {
    employeeId: '',
    areaCode: '',
    userTypeDescr: '',
    userName: '',
    phone: '',
    statusDescr: '',
    professionalTitlesDescr: '',
    departmentDescr: '',
    validityTypeDescr: '',
    beginTime: '',
    endTime: ''
  } as any
})
const tableObj = reactive({
  tableList: [],
  tableList2: [] as any
})
// 关闭回调
const handleClose = () => {
  state.userId = ''
  tableObj.tableList = []
  tableObj.tableList2 = []
  state.formData = {
    employeeId: '',
    areaCode: '',
    userTypeDescr: '',
    userName: '',
    phone: '',
    statusDescr: '',
    professionalTitlesDescr: '',
    departmentDescr: '',
    validityTypeDescr: '',
    beginTime: '',
    endTime: ''
  }
  state.show = false
}
// 获取详情
const getRoleDetail = async () => {
  let { data } = await getDetailById<any>(state.userId)
  const form = {} as any
  Object.keys(state.formData).forEach((item, index) => {
    if (item == 'areaCode') {
      form[item] = spliceCodeName(data.areaCode, data.areaCodeDescr)
      tableObj.tableList2.push({ areaCode: data.areaCode, areaCodeDescr: data.areaCodeDescr })
    } else {
      form[item] = data[item] ?? ''
    }
  })
  if (data.roles && data.roles.length > 0) {
    tableObj.tableList = data.roles.filter((v: any) => v.belongToThisUser)
  } else {
    tableObj.tableList = []
  }
  state.formData = form
}
defineExpose({ state, getRoleDetail })
</script>

<style lang="scss" scoped>
.my-detail-box {
  flex-wrap: wrap;
  .detail-item {
    width: 50%;
    font-size: 16px;
    &:not(:last-child) {
      margin-bottom: 10px;
    }

    .label {
      color: #999999;
    }
    .text {
      color: #333333;
      margin-left: 5px;
    }
  }
}
</style>
